<template>
  <div v-loading="loading" element-loading-text="加载数据中...">
    <el-card>
      <div>
        <span class="font-size-20"> 达人广场 </span>
        <span class="font-size-12 color-898B8F">
          通过筛选达人信息，自主查找合作达人
        </span>
      </div>
      <div class="search-box mt-20 flex">
        <el-input
          placeholder="请输入达人昵称或抖音号"
          v-model="searchVal"
          class="input-with-select"
          size="mini"
          clearable
        >
          <el-button
            type="primary"
            @click="handleSearchFunc"
            slot="append"
            size="mini"
            icon="el-icon-search"
            >搜索</el-button
          >
        </el-input>
        <el-button
          class="ml-20"
          type="primary"
          size="mini"
          @click="appointInvitationShow = true"
          >指定邀约达人</el-button
        >
      </div>
      <div class="mt-15">
        <div
          v-for="(item, index) in classFilteList"
          class="mb-10 flex"
          :key="index"
        >
          <div class="f--1">
            <span class="font-size-14 mr-20">
              {{ item.name }}
            </span>
            <template v-for="(it, ind) in item.header">
              <div
                v-if="
                  it.type == 'text' &&
                  (isRetract == true ? true : ind <= 9 ? true : false)
                "
                class="btn-style mt-5 mr-10 font-size-12"
                :key="'text' + ind"
                @click="btnSelect(it)"
                :class="[
                  filters.content_type.includes(it.name)
                    ? 'btn-style-activity'
                    : '',
                  filters.content_type.length == 0 && it.name == '全部'
                    ? 'btn-style-activity'
                    : '',
                ]"
              >
                {{ it.name }}
              </div>
              <div
                class="btn-style mt-5 mr-10 font-size-12"
                :key="'bool' + ind"
                @click="btnSelect(it)"
                :class="[
                  filters[it.field_name].includes('true')
                    ? 'btn-style-activity'
                    : '',
                ]"
                v-if="it.type == 'bool'"
              >
                {{ it.name }}
              </div>
              <el-select
                size="mini"
                :key="'checkbox-1' + ind"
                multiple
                v-if="
                  it.type == 'checkbox' &&
                  (isCommerceRetract == true ? true : ind <= 5 ? true : false)
                "
                :placeholder="it.name"
                clearable
                @remove-tag="(e) => multipleRemoveTag(e, it.children, it)"
                @change="(e) => multipleSelectChange(e, it.children, it)"
                class="mr-10 mt-5 select-box"
                :value="filters[it.field_name]"
              >
                <el-option
                  v-for="(optionItem, optionInd) in it.children"
                  :key="optionItem.field_name + optionInd"
                  :label="optionItem.name"
                  :value="optionItem.value"
                >
                </el-option>
              </el-select>

              <el-select
                size="mini"
                :key="'ratio-1' + ind"
                v-if="it.type == 'ratio'"
                :placeholder="it.name"
                @change="(e) => radioSelectChange(e, it.children, it)"
                class="mr-10 mt-5 select-box"
                :value="filters[it.field_name][0]"
              >
                <el-option
                  v-for="(optionItem, optionInd) in it.children"
                  :key="optionItem.field_name + optionInd"
                  :label="optionItem.name"
                  :value="optionItem.value || ''"
                >
                </el-option>
              </el-select>

              <el-cascader
                size="mini"
                ref="recommendCascader"
                :key="'cascader' + ind"
                v-if="it.type == 'cascade'"
                class="mr-10"
                placeholder="主推类目"
                :props="{ checkStrictly: true }"
                :options="it.children"
                @change="(e) => cascaderHandleChange(e, it)"
              >
              </el-cascader>

              <div
                v-if="it.type == 'agg'"
                class="btn-style mt-5 mr-10 font-size-12"
                :key="ind"
                @click="aggSelect(it)"
              >
                {{ it.name }}
              </div>
            </template>
          </div>

          <span
            class="font-size-12 f--center color-898B8F cursor-pointer"
            v-if="item.name == '内容类型'"
            @click="retract('isRetract')"
          >
            <span v-if="!isRetract">
              展开 <i class="el-icon-arrow-down"></i>
            </span>
            <span v-else> 收起 <i class="el-icon-arrow-up"></i> </span>
          </span>

          <span
            class="font-size-12 f--center color-898B8F cursor-pointer"
            v-if="item.name == '带货数据'"
            @click="retract('isCommerceRetract')"
          >
            <span v-if="!isCommerceRetract">
              展开 <i class="el-icon-arrow-down"></i>
            </span>
            <span v-else> 收起 <i class="el-icon-arrow-up"></i> </span>
          </span>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="flex">
        <span class="mr-20 f--center font-size-12">已筛选</span>
        <div class="f--1 f-start-center flex f-wrap" style="min-height: 70px">
          <div
            class="screenBox mr-10 flex"
            v-if="filters.content_type.length > 0"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="'内容类型：' + filters.content_type.join(',')"
              placement="top"
            >
              <span class="font-size-12 f-start-center"> 内容类型: </span>
            </el-tooltip>
            <div class="f-start-center ellipsis-1" style="max-width: 120px">
              <span
                class="font-size-12"
                v-for="(item, index) in filters.content_type"
                :key="index"
              >
                {{ item
                }}{{ index + 1 == filters.content_type.length ? "" : "," }}
              </span>
            </div>
            <img
              src="@/assets/images/close.png"
              style="width: 14px; height: 14px"
              class="ml-10 cursor-pointer"
              alt=""
              @click="cleanData('content_type')"
            />
          </div>
          <template v-if="boolTypeList.length > 0">
            <div
              class="screenBox mr-10 flex"
              v-for="(item, index) in boolTypeList"
              :key="'boolTypeList' + index"
            >
              <span class="font-size-12">
                {{ item.name }}
              </span>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="boolTypeClean(item)"
              />
            </div>
          </template>

          <template v-if="multipleSelectList.length > 0">
            <div
              class="flex screenBox mr-10 font-size-12"
              v-for="(item, index) in multipleSelectList"
              :key="'multipleSelectList' + index"
              v-show="item.text != ''"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.name + '：' + item.text"
                placement="top"
              >
                <span class="font-size-12 f-start-center">
                  {{ item.name }}:
                </span>
              </el-tooltip>
              <div class="f-start-center ellipsis-1" style="max-width: 110px">
                <span class="font-size-12">
                  {{ item.text }}
                </span>
              </div>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="multipleSelectClean(item)"
              />
            </div>
          </template>
          <template v-if="cascaderSelectObj.name">
            <div class="screenBox mr-10 flex">
              <span class="font-size-12"> {{ cascaderSelectObj.name }}： </span>
              <span class="font-size-12">
                {{ cascaderSelectObj.class }}
                {{ cascaderSelectObj.specific ? "/" : "" }}
              </span>
              <span class="font-size-12">
                {{ cascaderSelectObj.specific }}
              </span>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="cascaderTypeClean(cascaderSelectObj)"
              />
            </div>
          </template>

          <template v-if="radioSelectList.length > 0">
            <div
              class="screenBox mr-10 flex"
              v-for="(item, index) in radioSelectList"
              :key="'radioSelectList' + index"
            >
              <span class="font-size-12"> {{ item.name }}： </span>
              <span class="font-size-12">
                {{ item.text }}
              </span>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="radioSelectClean(item)"
              />
            </div>
          </template>

          <template v-if="portraitSelectList.intelligent">
            <div class="screenBox mr-10 flex">
              <span class="font-size-12">
                <span> {{ portraitSelectList.intelligent.name }}： </span>
              </span>

              <span
                class="font-size-12"
                v-for="(item, index) in portraitSelectList.intelligent.text"
                :key="index"
              >
                {{ item
                }}{{
                  index + 1 != portraitSelectList.intelligent.text.length
                    ? ","
                    : ""
                }}
              </span>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="portraitClean('intelligent')"
              />
            </div>
          </template>
          <template v-if="portraitSelectList.fans">
            <div class="flex screenBox mr-10 font-size-12">
              <el-tooltip
                class="item"
                effect="dark"
                :content="
                  portraitSelectList.fans.name +
                  portraitSelectList.fans.text.join(',')
                "
                placement="top"
              >
                <span class="font-size-12 f-start-center">
                  {{ portraitSelectList.fans.name }}:
                </span>
              </el-tooltip>

              <div class="f-start-center ellipsis-1" style="max-width: 120px">
                <span
                  class="font-size-12"
                  v-for="(item, index) in portraitSelectList.fans.text"
                  :key="index"
                >
                  {{ item }}
                </span>
              </div>
              <img
                src="@/assets/images/close.png"
                style="width: 14px; height: 14px"
                class="ml-10 cursor-pointer"
                alt=""
                @click="portraitClean('fans')"
              />
            </div>
          </template>
        </div>
        <div class="flex f--center" style="width: 220px">
          <el-button
            type="text"
            @click="resetFilter"
            class="mr-30"
            icon="el-icon-refresh-left"
          >
            重置筛选
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="$emit('screenFunc', filters, searchVal)"
          >
            筛选
          </el-button>
          <!-- <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleSearchFunc"
          >
            筛选
          </el-button> -->
        </div>
      </div>
    </el-card>

    <el-dialog
      :title="dialogObj.title"
      :visible.sync="dialogObj.show"
      width="30%"
      @close="pictureClose"
    >
      <div>
        <span class="mr-20">
          {{ dialogObj.title == "达人画像" ? "达人性别" : "粉丝性别" }}
        </span>
        <template v-if="dialogObj.data.gender">
          <el-select
            :placeholder="
              dialogObj.title == '达人画像'
                ? '请选择达人性别'
                : '请选择粉丝性别'
            "
            @change="
              (e) => portraitChange(e, dialogObj.data, 'gender', dialogObj, 1)
            "
            :value="
              filters[dialogObj.data.gender[0].field_name].length > 0
                ? filters[dialogObj.data.gender[0].field_name][0]
                : ''
            "
          >
            <el-option
              v-for="(item, index) in dialogObj.data.gender"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </div>

      <template
        v-if="
          dialogObj.data.sageLocation && dialogObj.data.sageLocation.length > 0
        "
      >
        <div class="mt-15">
          <span class="mr-20"> 达人地区 </span>
          <el-cascader
            ref="cascader"
            placeholder="请选择达人地区"
            :options="dialogObj.data.sageLocation"
            @change="
              (e) => portraitCascaderChange(e, dialogObj.data.sageLocation, 2)
            "
          ></el-cascader>
        </div>
      </template>

      <template
        v-if="
          dialogObj.data.institution && dialogObj.data.institution.length > 0
        "
      >
        <div class="mt-15">
          <span class="mr-20"> 签约机构 </span>
          <el-select
            placeholder="请选择签约机构"
            @change="(e) => portraitChange(e, dialogObj.data, 'institution', 3)"
            :value="
              filters[dialogObj.data.institution[0].field_name].length > 0
                ? filters[dialogObj.data.institution[0].field_name][0]
                : ''
            "
          >
            <el-option
              v-for="(item, index) in dialogObj.data.institution"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </template>

      <template v-if="dialogObj.data.age && dialogObj.data.age.length > 0">
        <div class="mt-15">
          <span class="mr-20"> 粉丝年龄 </span>
          <el-select
            placeholder="请选择粉丝年龄"
            @change="(e) => portraitChange(e, dialogObj.data, 'age')"
            :value="
              filters[dialogObj.data.age[0].field_name].length > 0
                ? filters[dialogObj.data.age[0].field_name][0]
                : ''
            "
          >
            <el-option
              v-for="(item, index) in dialogObj.data.age"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </template>

      <template
        v-if="
          dialogObj.data.fansLocation && dialogObj.data.fansLocation.length > 0
        "
      >
        <div class="mt-15">
          <span class="mr-20"> 粉丝地区 </span>
          <el-select
            placeholder="请选择粉丝地区"
            @change="(e) => portraitChange(e, dialogObj.data, 'fansLocation')"
            :value="
              filters[dialogObj.data.fansLocation[0].field_name].length > 0
                ? filters[dialogObj.data.fansLocation[0].field_name][0]
                : ''
            "
          >
            <el-option
              v-for="(item, index) in dialogObj.data.fansLocation"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </template>

      <span slot="footer" class="dialog-footer">
        <div class="flex f-between-center">
          <el-button type="text" @click="resetPortraitData(dialogObj.title)">
            重置
          </el-button>
          <div>
            <el-button @click="dialogObj.show = false">取 消</el-button>
            <el-button type="primary" @click="aggSubmit">确 定</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
      title="指定达人邀约"
      :visible.sync="appointInvitationShow"
      width="50%"
    >
      <AppointInvitation
        ref="appointInvitation"
        @appointInvitationFn="appointInvitationFn"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getClassFilterList } from "@/api/invitation";
import AppointInvitation from "./batchInvitation/appointInvitation.vue";
export default {
  components: { AppointInvitation },
  data() {
    return {
      searchVal: "",
      classFilteList: [],
      saveFilters: {},
      isRetract: false,
      isCommerceRetract: false,
      filters: {
        author_gender: [],
        author_location: [],
        author_level: [],
        bind_institution: [],
        author_portrait: [],
        can_connect: [],
        commission_quotation: [],
        content_type: [],
        fan_portrait: [],
        fans_age: [],
        fans_gender: [],
        fans_location: [],
        fans_num: [],
        has_contact: [],
        high_response_rate_im: [],
        image_text_play_time: [],
        image_text_sale_single: [],
        image_text_total_sales: [],
        live_sale_avg: [],
        live_total_sales: [],
        live_watching_times: [],
        main_cate: [],
        merchant_info: [],
        only_commission: [],
        sale_reputation: [],
        total_sales: [],
        video_play_time: [],
        video_sale_single: [],
        video_total_sales: [],
        window_order_cnt: [],
        window_product_cnt: [],
        windows_total_sales: [],
      },

      dialogObj: {
        show: false,
        title: "达人画像",
        gender: "",
        age: "",
        area: "",
        data: [],
        field_name: "",
        isConfirm: false,
      },

      boolTypeList: [],
      multipleSelectList: [],
      cascaderSelectObj: {},
      radioSelectList: [],
      portraitSelectList: {
        intelligent: null,
        fans: null,
      },
      loading: true,
      appointInvitationShow: false, // 指定邀约达人弹窗
    };
  },
  methods: {
    retract(key) {
      this[key] = !this[key];
    },
    multipleRemoveTag(index, children, it) {
      const filterFun = (field_name, val) => {
        this.filters[field_name] = this.filters[field_name].filter((item) => {
          return item != val;
        });
      };
      let { field_name } = it;
      this.filters[field_name];
      if (this.filters[field_name].includes(undefined)) {
        filterFun(field_name, undefined);
      }
      filterFun(field_name, index);
    },
    portraitClean(key) {
      const cleanFun = (arr) => {
        arr.forEach((item) => {
          this.filters[item] = [];
        });
      };
      let arr;
      if (key == "intelligent") {
        this.portraitSelectList[key] = null;
        arr = [
          "author_gender",
          "author_location",
          "author_portrait",
          "bind_institution",
        ];
        cleanFun(arr);
      } else {
        arr = ["fan_portrait", "fans_age", "fans_gender", "fans_location"];
        cleanFun(arr);
        this.portraitSelectList[key] = null;
      }
    },
    cascaderTypeClean(obj) {
      let { field_name } = obj;
      this.filters[field_name] = [];
      this.cascaderSelectObj = {};
      if (this.$refs.recommendCascader[0].$refs) {
        this.$refs.recommendCascader[0].$refs.panel.clearCheckedNodes();
      }
    },
    multipleSelectClean(item) {
      let { field_name } = item;
      this.filters[field_name] = [];
      this.multipleSelectList = this.multipleSelectList.filter((item) => {
        return item.field_name != field_name;
      });
    },
    resetFilter() {
      console.log("充值");
      this.filters = {
        author_gender: [],
        author_location: [],
        author_level: [],
        bind_institution: [],
        author_portrait: [],
        can_connect: [],
        commission_quotation: [],
        content_type: [],
        fan_portrait: [],
        fans_age: [],
        fans_gender: [],
        fans_location: [],
        fans_num: [],
        has_contact: [],
        high_response_rate_im: [],
        image_text_play_time: [],
        image_text_sale_single: [],
        image_text_total_sales: [],
        live_sale_avg: [],
        live_total_sales: [],
        live_watching_times: [],
        main_cate: [],
        merchant_info: [],
        only_commission: [],
        sale_reputation: [],
        total_sales: [],
        video_play_time: [],
        video_sale_single: [],
        video_total_sales: [],
        window_order_cnt: [],
        window_product_cnt: [],
        windows_total_sales: [],
      };
      this.$emit("screenFunc", this.filters);
      this.$emit("recoyerOyeryuer");
      [
        "boolTypeList",
        "multipleSelectList",
        "cascaderSelectObj",
        "radioSelectList",
      ].forEach((key) => {
        this[key] = [];
      });
      this.portraitSelectList = {
        intelligent: null,
        fans: null,
      };
    },

    cleanData(key) {
      this.filters[key] = [];
    },
    radioSelectClean(item) {
      let { field_name } = item;
      this.radioSelectList = this.radioSelectList.filter((item) => {
        return item.field_name != field_name;
      });
      this.filters[field_name] = [];
    },
    boolTypeClean(item) {
      let { field_name } = item;
      this.boolTypeList = this.boolTypeList.filter((it) => {
        return it.field_name != field_name;
      });
      this.filters[field_name] = [];
    },
    pictureClose() {
      this.dialogObj.show = false;
      if (!this.dialogObj.isConfirm) {
        this.dialogObj.title == "达人画像"
          ? this.$refs.cascader.$refs.panel.clearCheckedNodes()
          : null;
        this.filters = JSON.parse(JSON.stringify(this.saveFilters));
      }
    },
    resetPortraitData(type) {
      if (this.$refs.cascader.$refs) {
        this.$refs.cascader.$refs.panel.clearCheckedNodes();
      }
      if (type == "达人画像") {
        [
          "author_gender",
          "author_location",
          "author_portrait",
          "bind_institution",
        ].forEach((item) => {
          this.filters[item] = [];
        });
      } else {
        ["fan_portrait", "fans_age", "fans_gender", "fans_location"].forEach(
          (item) => {
            this.filters[item] = [];
          }
        );
      }
    },
    portraitCascaderChange(e, data) {
      let { field_name } = data[0];
      let [_, b] = e;
      this.filters[field_name] = [b];
    },
    portraitChange(e, item, key, row, order) {
      let find = item[key].find((item) => {
        return item.value == e;
      });
      console.log(find, "1111");
      let data = this.dialogObj.data[key];
      let { field_name } = data[0];
      // if (e == undefined) {
      //   e = ''
      // }
      this.filters[this.dialogObj.field_name] = ["undefined"];
      this.filters[field_name] = [e];
    },
    aggSubmit() {
      this.dialogObj.isConfirm = true;
      this.dialogObj.show = false;
      let arr;
      let obj = {};
      if (this.dialogObj.title == "达人画像") {
        arr = ["author_gender", "author_location", "bind_institution"];
        console.log(this.dialogObj.data, "data");
        arr.forEach((item) => {
          obj[item] = JSON.parse(JSON.stringify(this.filters[item]));
        });
        if (obj.author_gender.length > 0) {
          obj.author_gender = this.dialogObj.data.gender.find((item) => {
            return item.value == obj.author_gender[0];
          }).name;
        }
        if (obj.bind_institution.length > 0) {
          obj.bind_institution = this.dialogObj.data.institution.find(
            (item) => {
              return item.value == obj.bind_institution[0];
            }
          ).name;
        }
        obj.author_location = obj.author_location[0];
        console.log(obj);
        this.portraitSelectList.intelligent = {
          name: "达人画像",
          text: Object.values(obj),
        };
      } else {
        arr = ["fans_age", "fans_gender", "fans_location"];
        arr.forEach((item) => {
          obj[item] = JSON.parse(JSON.stringify(this.filters[item]));
        });
        if (obj.fans_age.length > 0) {
          obj.fans_age = this.dialogObj.data.age.find((item) => {
            return item.value == obj.fans_age[0];
          }).name;
        }
        if (obj.fans_gender.length > 0) {
          obj.fans_gender = this.dialogObj.data.gender.find((item) => {
            return item.value == obj.fans_gender[0];
          }).name;
        }
        if (obj.fans_location.length > 0) {
          obj.fans_location = this.dialogObj.data.fansLocation.find((item) => {
            return item.value == obj.fans_location[0];
          }).name;
        }
        this.portraitSelectList.fans = {
          name: "粉丝画像",
          text: Object.values(obj),
        };
      }
    },
    aggSelect(it) {
      this.dialogObj.isConfirm = false;
      this.saveFilters = JSON.parse(JSON.stringify(this.filters));
      const childrenDataFilter = (data, name) => {
        let age = [];
        let gender = [];
        let sageLocation = [];
        let fansLocation = [];
        let institution = [];
        data.forEach((item) => {
          if (name == "达人画像") {
            if (item.name == "达人性别") {
              gender = item.children;
            } else if (item.name == "达人地区") {
              sageLocation = item.children.map((item) => {
                return {
                  ...item,
                  value: item.name,
                  label: item.name,
                  children: item.children.map((it, ind) => {
                    return {
                      ...it,
                      value: it.name,
                      label: it.name,
                    };
                  }),
                };
              });
            } else if (item.name == "签约机构") {
              institution = item.children;
            }
          } else if (name == "粉丝画像") {
            if (item.name == "粉丝性别") {
              gender = item.children.map((item) => {
                return {
                  ...item,
                  value: `${item.value}`,
                };
              });
            } else if (item.name == "粉丝地区") {
              fansLocation = item.children.map((item) => {
                return {
                  ...item,
                  value: `${item.value}`,
                };
              });
            } else if (item.name == "粉丝年龄") {
              age = item.children;
            }
          }
        });
        return {
          gender,
          location,
          sageLocation,
          fansLocation,
          age,
          institution,
        };
      };

      let { name, field_name, children } = it;
      this.dialogObj.title = name;
      this.dialogObj.show = true;
      this.dialogObj.field_name = field_name;
      this.dialogObj.data = childrenDataFilter(children, name);
    },
    btnSelect(item) {
      const general = (val) => {
        let { name, value, type } = val;
        if (val.field_name == "content_type" && value == "全部") {
          this.filters[val.field_name] = [];
          return;
        }
        if (type == "bool") {
          this.boolTypeList.includes(val)
            ? (this.boolTypeList = this.boolTypeList.filter(
                (item) => item.field_name != val.field_name
              ))
            : this.boolTypeList.push(val);
        }
        Array.isArray(this.filters[val.field_name]) &&
        this.filters[val.field_name].includes(value)
          ? (this.filters[val.field_name] = this.filters[val.field_name].filter(
              (item) => item != value
            ))
          : this.filters[val.field_name].push(value);
      };
      !!item.field_name && general(item);
    },
    multipleSelectChange(item, it, row) {
      let multipleSelectName = row.name;
      let sign = this.multipleSelectList.some(
        (item) => item.name == multipleSelectName
      );
      if (item.includes(undefined)) {
        let { value, field_name } = it[0];
        let valueList = it
          .filter((item) => {
            return item.value != (undefined || null);
          })
          .map((item) => item.value);

        let nameList = it
          .filter((item) => {
            return item.value != (undefined || null);
          })
          .map((item) => item.name);
        this.filters[field_name] = [undefined, ...valueList];
        if (!sign) {
          this.multipleSelectList.push({
            name: row.name,
            text: nameList.join(","),
            field_name: row.field_name,
          });
        }
      } else {
        let { value, field_name } = it[0];
        this.filters[field_name] = item;
        let text = item
          .map((val) => {
            return it.find((item) => {
              return item.value == val;
            }).name;
          })
          .join(",");
        if (!sign) {
          this.multipleSelectList.push({
            name: multipleSelectName,
            text: text,
            field_name: row.field_name,
          });
        } else {
          if (item.length == 0) {
            this.multipleSelectList = this.multipleSelectList.filter((item) => {
              return item.name != multipleSelectName;
            });
            return;
          }
          this.multipleSelectList = this.multipleSelectList.map((item) => {
            if (item.name == multipleSelectName) {
              return {
                name: multipleSelectName,
                text: text,
                field_name: row.field_name,
              };
            } else {
              return item;
            }
          });
        }
      }
    },
    radioSelectChange(index, it, row) {
      let { field_name } = it[0];
      let { name } = row;
      this.filters[field_name] = [index];
      let sign = this.radioSelectList.some((item) => {
        return item.name == row.name;
      });
      if (sign) {
        let find =
          index == ""
            ? it[0].name
            : it.find((item) => item.value == index).name;
        this.radioSelectList = this.radioSelectList.map((item) => {
          if (item.name == row.name) {
            return {
              name,
              text: find,
              field_name,
            };
          } else {
            return item;
          }
        });
      } else {
        let find =
          index == ""
            ? it[0].name
            : it.find((item) => item.value == index).name;
        this.radioSelectList.push({
          name,
          text: find,
          field_name,
        });
      }
    },
    cascaderHandleChange(value, it) {
      let { children } = it;
      let [a, b] = value;
      if (!a) {
        return;
      }
      let [val, field_name] = a.split("-");
      let classA = children.find((item) => item.value == a);
      let classB = classA.children.find((item) => item.value == b);
      if (!b) {
        this.filters[field_name] = [val];
        this.cascaderSelectObj = {
          field_name: field_name,
          name: it.name,
          class: classA.label,
        };
      } else {
        this.filters[field_name] = [val, b];
        this.cascaderSelectObj = {
          field_name: field_name,
          name: it.name,
          class: classA.label,
          specific: classB.label,
        };
      }
    },
    handleSearchFunc() {
      if (this.searchVal == "") {
        // this.$message({
        //   type: "warning",
        //   message: "请输入达人昵称或抖音号",
        // });
        this.$emit("searchFunc", null);
      } else {
        this.$emit("searchFunc", this.searchVal);
      }
    },

    getClassFilterListFunc() {
      this.loading = true;
      getClassFilterList({
        type: "1",
      })
        .then((res) => {
          let { code, data } = res;
          console.log(code);
          if (code == 0) {
            console.log(data, "data");
            const cascadeDataFilter = () => {
              let cascadeArr = data.headers
                .find((item) => {
                  return item.name == "达人信息";
                })
                .header.find((item) => {
                  return item.type == "cascade";
                });
              cascadeArr = {
                ...cascadeArr,
                value: cascadeArr.field_name,
                label: cascadeArr.name,
                children: cascadeArr.children.map((item) => {
                  return {
                    ...item,
                    value: `${item.value}-${item.field_name}`,
                    label: item.name,
                    children: item.children.map((it) => {
                      return {
                        ...it,
                        label: it.name,
                        value: `${it.value}`,
                      };
                    }),
                  };
                }),
              };
              return cascadeArr;
            };
            this.classFilteList = data.headers.map((item) => {
              if (
                item.name == "达人信息" &&
                item.header.find((item) => item.name == "主推类目")
              ) {
                return {
                  ...item,
                  header: item.header.map((item) => {
                    if (item.name == "主推类目" && item.type == "cascade") {
                      return cascadeDataFilter(data);
                    } else {
                      return item;
                    }
                  }),
                };
              } else {
                return item;
              }
            });
            this.loading = false;
          }
        })
        .catch((err) => {
          this.$message({
            type: "warning",
            message: "该商家未入驻精选联盟,请先入驻精选联盟",
          });
          this.loading = false;
          // console.log(err);
        });
    },
    // 指定达人邀约弹窗放回
    appointInvitationFn(val) {
      console.log(val);
      this.$emit("appointInvitationFunc", val);
      this.appointInvitationShow = false;
    },
  },
  mounted() {
    setTimeout(() => {
      this.getClassFilterListFunc();
    }, 2000);
    this.$emit("screenFunc", this.filters);
  },
};
</script>

<style scoped>
.el-input-group__append {
  background-color: #409eff;
  color: #ffffff;
  border: 0;
}

.btn-style {
  padding: 2px 15px;
  color: #606266;
  border: 1px solid #dcdfe6;
  display: inline-block;
  text-align: center;
  line-height: 21px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-style:hover {
  color: #409eff;
  border: 1px solid #409eff;
}

.btn-style-activity {
  color: #409eff;
  border: 1px solid #409eff;
}

.search-box {
  width: 600px;
}

.select-box {
  width: 130px;
}

.screenBox {
  padding: 3px;
  background-color: rgba(137, 139, 143, 0.08);
  color: rgb(37, 41, 49);
  border: 1px solid transparent;
  height: 24px;
  font-size: 16px;
  max-width: 230px;
  border-radius: 4px;
  line-height: 16px;
}
</style>
